<template>
	<view class="wrapper">
		<view class="top">
			<view class="top-box">
				<view>
					<view class="top-box-amount">
						<view class="top-box-amount-name">
							<image class="top-box-amount-icon" src="@/package-purse/static/images/icon.png" mode="widthFix"></image>
							账户余额(元)
						</view>
						<view class="top-box-amount-value">{{ balance }}</view>
					</view>
					<view class="top-box-line" />
					<view class="top-box-bottom">
						<view class="top-box-bottom-box" @click="handleJump(1)">
							<view class="top-box-bottom-box-name">
								<text style="margin-right: 10rpx">租金余额(元)</text>
								<u-icon name="arrow-right" color="#fff" size="24rpx"></u-icon>
							</view>
							<view class="top-box-bottom-box-value">{{ rentBalance }}</view>
						</view>
						<view class="top-box-bottom-box" @click="handleJump(2)">
							<view class="top-box-bottom-box-name">
								<text style="margin-right: 10rpx">佣金余额(元)</text>
								<u-icon name="arrow-right" color="#fff" size="24rpx"></u-icon>
							</view>
							<view class="top-box-bottom-box-value">{{ commissionBalance }}</view>
						</view>
					</view>
				</view>
			</view>
<!-- 						<view class="top-bottom">
				<view class="top-bottom-box">
					<view class="top-bottom-box-left">
						<image class="top-bottom-box-left-icon" src="@/package-purse/static/images/invoice.png" mode="widthFix"></image>
						<text>发票夹</text>
					</view>
					<view class="top-bottom-box-right">
						查看
						<image class="top-bottom-box-right-icon" src="@/package-purse/static/images/right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="top-bottom-line" />
				<view class="top-bottom-box">
					<view class="top-bottom-box-left">
						<image class="top-bottom-box-left-icon" src="@/package-purse/static/images/bankCard.png" mode="widthFix"></image>
						<text>银行卡</text>
					</view>
					<view class="top-bottom-box-right">
						查看
						<image class="top-bottom-box-right-icon" src="@/package-purse/static/images/right.png" mode="widthFix"></image>
					</view>
				</view>
			</view> -->
		</view>
			<view class="main">
				<view class="title">
					<view class="title-line" />
					<text>热门商品</text>
					<view class="title-line" />
				</view>
				<view class="list">
					<view class="list-item" v-for="item in list" :key="item.product_id" @click="gotoProduct(item)">
						<image class="list-item-img" :src="item.product_image" mode="widthFix"></image>
						<view class="list-item-name">{{ item.product_name }}</view>
						<view class="list-item-amount">
							<text class="list-item-amount-text mr-10">¥</text>
							{{ item.purchase_price }}
							<!-- <text class="list-item-amount-text">.36/天</text> -->
						</view>
					</view>
				</view>
				<u-back-top :scroll-top="scrollTop"></u-back-top>
				<u-loadmore
					:status="loadStatus"
					:line="true"
					:loading-text="loadingText"
					:loadmore-text="loadmoreText"
					:nomore-text="nomoreText"
					:error-text="errorText"
					@click-error="retryLoad"
					v-if="list.length > 0"
				/>
			</view>
		</view>
	</view>
</template>

<script>
import { purse } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';
import { trusteeship } from '@/api';
export default {
	// 混入滚动加载逻辑
	mixins: [
		createPageScrollLoadMixin(
			trusteeship.trusteeshipProductList, // 请求函数
			{
				list_rows: 20,
				resFormat: 1
			} // 配置项
		)
	],
	data() {
		return {
			balance: '0.00', // 总金额
			rentBalance: '0.00', // 租金
			commissionBalance: '0.00', // 佣金
			defaultParams: {
				sortType: 'sales'
			}
		};
	},
	onShow() {
		this.queryParams = {
			sortType: 'sales'
		};
		this.getPurseDetail();
	},
	methods: {
		gotoProduct(item) {
			this.gotoPage('/pages/product/detail/detail?product_id=' + item.product_id);
		},
		// 获取钱包信息
		async getPurseDetail() {
			const res = await purse.wallet();
			const { balance, rent_balance, commission_balance } = res.data;
			this.balance = balance || '0.00';
			this.rentBalance = rent_balance || '0.00';
			this.commissionBalance = commission_balance || '0.00';
		},
		handleJump(type) {
			switch (type) {
				case 1:
					uni.navigateTo({
						url: '/package-purse/rentBalance/rentBalance'
					});
					break;

				case 2:
					uni.navigateTo({
						url: '/package-purse/commission/commission'
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20rpx 30rpx;
}
.top {
	border-radius: 20rpx;
	background-color: #fff;
	&-box {
		padding: 35rpx 36rpx;
		height: 310rpx;
		box-sizing: border-box;
		background-image: url('https://yundong-shop.oss-cn-shanghai.aliyuncs.com/20250914222631229467658.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		&-amount {
			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
			&-name {
				display: flex;
				align-items: center;
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
			}
			&-value {
				margin-top: 15rpx;
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 48rpx;
				color: #ffffff;
			}
		}
		&-line {
			margin: 15rpx 0 22rpx 0;
			height: 2rpx;
			background: #fafafa;
			border-radius: 1rpx;
			opacity: 0.3;
		}
		&-bottom {
			display: flex;
			align-items: center;
			&-box {
				width: 50%;
				box-sizing: border-box;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #ffffff;
				&-name {
					display: flex;
					align-items: center;
				}
				&-value {
					margin-top: 20rpx;
					font-size: 43rpx;
				}
				&-icon {
					width: 10.7rpx;
					height: 18.9rpx;
				}
			}
		}
	}
	&-bottom {
		background-color: #fff;
		height: 90rpx;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		&-line {
			width: 3rpx;
			height: 41rpx;
			background: #f85a16;
			opacity: 0.3;
		}
		&-box {
			width: 50%;
			box-sizing: border-box;
			padding: 0 20rpx 0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			&-left {
				display: flex;
				align-items: center;
				&-icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
			&-right {
				display: flex;
				align-items: center;
				&-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
}
.main {
	margin-top: 35rpx;
	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		text {
			margin: 0 20rpx;
		}
		&-line {
			width: 28rpx;
			height: 3rpx;
			background: #ff0000;
			opacity: 0.1;
		}
	}
	.list {
		margin: 30rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		&-item {
			width: calc(50% - 15rpx);
			min-height: 460rpx;
			background: #ffffff;
			border-radius: 10rpx;
			padding: 20rpx 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;
			&-img {
				width: 100%;
				height: 330rpx;
			}
			&-name {
				width: 100%;
				font-family: ' PingFang SC';
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin: 20rpx 0 15rpx 0;
				box-sizing: border-box;
				/* 1. 限制文本仅显示1行 */
				white-space: nowrap;
				/* 2. 隐藏超出容器的内容 */
				overflow: hidden;
				/* 3. 超出部分显示省略号（需配合前两行使用） */
				text-overflow: ellipsis;
			}
			&-amount {
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 36rpx;
				color: #ff0000;
				&-text {
					font-size: 24rpx;
				}
			}
		}
	}
}
.mr-10 {
	margin-right: 10rpx;
}
</style>
